<template>
    <div class="comments">

<div class="comt">
    <h3>提交评论</h3>
    <span @click="$router.go(-1)">返回</span>
</div>
<div class="content">
   <el-input
    v-model="comet"
     placeholder="请输入内容" class="cots"></el-input>
</div>


  <div class="abc">
        <van-button type="info" class="publish"
         @click="comeOut">发送评论</van-button>
  </div>

<div class="listOf">
    <div class="list">
        <h3>评论列表</h3>
        <span>44条评论</span>
    </div>

</div>
<div class="usercomment" v-for=" (item,index) in list" :key="index"  >
    <div class="users">
    <span>{{item.content}}</span>
    <div class="user">
        <span>{{item.user_name}}</span>
        <span>{{item.add_time}}</span>
    </div>

</div>
</div>
    </div>
</template>

<script>
export default {
props:{
    list:{
       type:Array,
       required:true

    }
},
    data() {
        return {
            comet:''
        };
    },

    mounted() {
    },  

   methods: {
  comeOut(){
   if(this.comet===''){
       return
   }
   this.$emit('temp',this.comet)
   this.comet=''
       } 
    },
};
</script>

<style lang="less" scoped>
.abc{
    margin-top:  20px;
    padding: 0 20px;
    margin-bottom: 10px;
}
.publish{
    width: 100%;
}
.comments{
      padding-top: 20px;
    .comt{
        padding:0 20px;
    border-bottom:1px solid pink ;
    height: 40px;
    display: flex;
    padding-bottom: 20px;
  
    h3{
font-size: 18px;
    }
    span{
        // color: #1a9bff;
       margin-left: 150px;
    margin-top: 6px;
    }
}
.content{
    padding-top: 20px;
  padding:0 20px;
  margin-top: 10px;

}

}
.listOf{
    border-top: 1px solid pink;
    border-bottom: 1px solid pink;
    
}
.list{
    height: 40px;
    line-height: 40px;
    margin-bottom:10px;
  margin-top: 10px;
    display: flex;
    padding: 0 20px;
    h3{
        font-size: 18px;
    }
span{
    margin-left:150px;
}
}
.usercomment{
    border-bottom: 1px solid pink;
}
.users{
     height: 50px;
    margin-top: 20px;
        padding: 0 20px;
        margin-bottom: 10px ;
  
.user{
     display: flex;
     justify-content:space-between;
     margin-top: 10px;
}
}
</style>